<template>
  <div class="home">
    <!-- 头部nav -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="home-login" name="left"></div>
      </template>
      <template #right>
        <van-button class="search-btn" round type="primary" icon="search" @click="$router.push({path:'/search'})"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 2.tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push({path:'/article',query:{id:item.art_id}})">
               <template #label>
              <div>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                    <van-image :src="value" />
                  </van-grid-item>
                </van-grid>
                <div>
                  <span>{{ item.aut_name }}</span>&nbsp;
                  <span>{{ item.comm_count }}评论</span>&nbsp;
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </div>
            </template>
            </van-cell>          
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
/* 
  1.mapState辅助函数作用，自动生成计算属性
  2.语法：
      导包
      在cumputed计算属性种使用函数
       ...mapState(['aaa','bbb'])
*/
//导入接口
import {getChannelList,getArticleList} from './home.js'
import moment from 'moment'
//设置语言
moment.locale('zh-cn')

export default {
  name: "home",
  data() {
    return {
      active: 0, //tab栏
      loading: false, //上拉 加载更多动画
      finished: false, //上拉  加载全部数据开关
      list: [], //文章列表数据
      isLoading: false, //下拉刷新动画
      channels:[],//频道列表  
    };
  },
  async created(){
    //1.加载频道列表
    let res = await getChannelList()
    console.log(res);
    //1.1绑定数据
    this.channels =res.data.data.channels
  },
  methods: {

    /* 上拉加载更多 */
    async onLoad() {
      //2.加载文章列表
      //2.1判断是不是第一页
      if(!this.timestamp){
        this.timestamp =Date.now()
      }
      //2.2请求数据
      let res =await getArticleList({
        channel_id:this.channels[this.active].id,
        timestamp:this.timestamp
      })
      //2.3绑定数据
      this.timestamp=res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res);
      //2.4关闭加载动画
      this.loading =false
      //2.5 最多50条，如果所有元素加载完毕，则停止滚动
      if(this.list.length >=50){
        this.finished =true
      }
    },
    /* 2.下拉刷新事件 */
    onRefresh() {
      this.timestamp=null;
      //(0)一旦下拉刷新，无条件修改上拉列表finished为false
      this.finished = false;
      //(1)清空当前数据
      this.list = [];
      //(2)重新加载数据
      this.loading = true;
      this.onLoad();
      //(3)关闭下拉刷新动画，否则顶部动画会一直转圈
      this.isLoading = false;
    },
     tabClick(){
      this.onRefresh();
    }
  },
  filters:{
    fromNow(value){
      return moment (value).fromNow()
    }
  }
};
</script>

<style lang="less">
/* 1.顶部栏 */
.van-nav-bar__content {
  background-color: #0098fa;
}
.home-login {
  width: 100px;
  height: 30px;
  background: url("~@/assets/logo.png") no-repeat;
  background-size: cover;
}
.van-nav-bar__right {
  .search-btn {
    height: 30px;
    background-color: #1dadfb;
    color: #fff;
    border: 1px solid transparent;
    .van-icon {
      color: #fff;
    }
  }
}
/* 2.tab栏 */

/* 头部tab栏 */
.van-tabs__wrap {
  position: fixed;
  top: 46px;
  /* 添加层级避免被覆盖 */
  z-index: 10;
  width: 100%;
}
/* 底部内容 */
.van-tabs__content {
  /* 解决tabs头部固定定位脱标遮挡标准流 */
  margin-top: 44px;
}
</style>
